<template>
  <view class="address-wrap">
    <back :back-title="backTitle"></back>
    <search @search="handlerSearch"></search>
    <view class="button-group">
      <view class="btn" :class="{active: currentIndex === index}" v-for="(item, index) of tabList" :key="index" @click="handleChange(index)">
        <image v-if="currentIndex !== index" :src="item.imgUrl" mode="aspectFill"></image>
        <image v-else :src="item.selectImg" mode="aspectFill"></image>
      </view>
    </view>
    <book-list :list-data="listData"></book-list>
    <empty v-if="!isEmpty && frist"></empty>
  </view>
</template>

<script>
import bookList from './components/list'
import {book} from '../../api/book'
import {deepClone} from '../../utils/index'
import empty from '../../components/empty'
export default {
  name: 'addressBook',
  components: {
    bookList,
    empty
  },
  data() {
    return {
      backTitle: '通讯录',
      tabList: [
        {
          desc: '老师',
          imgUrl: '/static/images/address-book/teacher.png',
          selectImg: '/static/images/address-book/teacher-active.png'
        },
        {
          desc: '学生',
          imgUrl: '/static/images/address-book/student.png',
          selectImg: '/static/images/address-book/student-active.png'
        }
      ],
      currentIndex: 0,
			teacherList: {},
			studentList: {},
      listData: {},
      initListData : {},
			frist: true
    }
  },
  computed: {
    isEmpty() {
      return Object.keys(this.listData).length
    }
  },
	created() {
		this.initList()
	},
  methods:{
    handleChange(index) {
			this.listData = {}
			this.frist = false
      this.currentIndex = index
			if (index === 0) {
				setTimeout(() => {
					this.listData = {...this.teacherList}
				},10)
			} else {
				setTimeout(() => {
					this.listData = {...this.studentList}
				},10)
			}
			// this.listData = index === 0 ? this.teacherList : this.studentList
			this.initListData = index === 0 ? deepClone(this.teacherList) : deepClone(this.studentList)
    },
		// 搜索
		handlerSearch(info) {
			if (!info.length) {
				this.listData = {}
				setTimeout(() => {
					this.listData = {...this.initListData}
				},10)
				return false
      }
			const result = {}
      const data = this.initListData
			for(let key in data) {
				data[key].map((item) => {
					if (item.userName.indexOf(info) > -1 || key === info.toUpperCase()) {
            if (!result[key]) {
              result[key] = [item]
            } else {
              result[key].push(item)
            }
					}
				})
      }
			this.listData = {...result}
		},
		async initList() {
      uni.showLoading({
        title: '加载中'
      })
      const res = await book()
      uni.hideLoading()
			const {student,teacher} = res
      this.teacherList = Object.assign({},teacher)
      this.studentList = Object.assign({},student)
      this.initListData = deepClone(teacher)
      this.listData = deepClone(teacher)
		}
  }
}

</script>
<style lang='scss' scoped>
.address-wrap{
  width: 100%;
  min-height: 100%;
  .button-group{
    width: 100%;
    padding: 40upx 20upx 20upx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .btn {
      background-color: #E6E6E6;
      color: #CDCDCD;
      width:348upx;
      height:90upx;
      background:rgba(230,230,230,1);
      border-radius:6upx;
      display: flex;
      justify-content: center;
      align-items: center;
      image{
        width:204upx;
        height: 68upx;
      }
      &:nth-of-type(2) {
        image{
          width: 186upx;
          height: 69upx;
        }
      }
    }
    .active{
      background-color: #7ECEF4;
    }
  }
}
.qiun-charts3 {
		width: 750upx;
		height: 250upx;
		background-color: #FFFFFF;
		position: relative;
	}

	.charts3 {
		position: absolute;
		width: 250upx;
		height: 250upx;
		background-color: #FFFFFF;
	}
</style>